<template>
  <div class="concern">
    <h2>关注列表</h2>
    <div style="margin-top: 15px">
      <table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
        <thead class="concern-box">
          <!-- <div class="concern-box"> -->
          <tr>
            <th class="concern-title">头像/用户名称</th>
            <th class="concern-signature">签名</th>
            <th class="concern-operation">操作</th>
          </tr>
          <!-- </div> -->
        </thead>
        <tbody class="concern-table">
          <tr v-for="item in followList" :key="item.friendId">
            <td class="store-name">
              <img :src="item.friendAvatar" class="store-picture" />
              <p>{{ item.friendName }}</p>
            </td>
            <td class="store-sign">
              <p>{{ item.friendSignature }}</p>
            </td>
            <td>
              <el-button
                type="text"
                style="font-weight: 600; color: #000"
                @click="isConcerned"
                >取消关注</el-button
              >
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        <el-pagination
          background
          align="center"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="followList.lenght"
        >
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
        class="change-concern"
        :before-close="handleClose"
      >
        <div style="text-align: center">
          <div>
            <img src="../../assets/images/hamburger.png" class="store-avator" />
          </div>
          <p class="store-title">停止关注 @塔斯汀</p>
        </div>
        <span slot="footer" class="dialog-footer store-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="cancelFollowFun()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getFollowListApi, cancelFollowApi } from "@/api/follow";
export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      followList: [],
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {
    this.followListFun();
  },
  methods: {
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.followListFun();
    },
    cancelFollowFun() {
      cancelFollowApi({
        userId: this.userInfo.userId,
        friendId: this.friendId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.followListFun();
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "已取消关注",
          });
        } else {
          this.$message({
            type: "info",
            message: "取消失败",
          });
        }
      });
    },
    followListFun() {
      getFollowListApi({
        userId: this.userInfo.userId,
        page: this.currentPage,
      }).then((res) => {
        if (res.data.data.code == 200) {
          this.followList = res.data.data.data;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    isConcerned() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.concern {
  width: 96%;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  margin: auto;
}
.concern-box {
  margin-top: 15px;
  text-align: left;
  width: 100%;
  height: 35px;
  background: #f2f2f4;
  font-weight: 600;
  color: #7c7a7a;
}
.concern-title {
  width: 35%;
  padding: 0 0 0 10px;

  /* margin-left: 14px; */
  box-sizing: border-box;
}
.concern-signature {
  width: 55%;
}
.store-picture {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  border-radius: 90px;
}
.store-avator {
  width: 90px;
  height: 90px;
  border-radius: 90px;
}
.concern-table tr {
  height: 70px;
  font-size: 14px;
}
.concern-table tr:hover {
  background: #f2f2f4;
}
.store-name p {
  line-height: 70px;
  margin-left: 10px;
}
.store-name {
  display: flex;
  margin-left: 5px;
  text-align: center;
}
.store-name p {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 10px;
  box-sizing: 10px;
  text-overflow: ellipsis;
}
.store-sign p {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 10px;
  box-sizing: 10px;
  text-overflow: ellipsis;
}
.store-title {
  margin-top: 15px;
  font-size: 16px;
}
.change-concern .el-dialog .el-dialog__footer {
  text-align: center !important;
}
.store-footer .el-button {
  padding: 8px 40px;
}
.store-footer .el-button--primary {
  color: #fff;
  background-color: #ff2c55;
  border: none;
}
</style>
